<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
  <title>报告预览</title>
  <style>
    :root{
      --brand:#44B7AE;
      --bg:#f7f9fb;
      --text:#2a2f36;
      --sub:#6b7785;
      --line:#eef2f5;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif}
    .page{max-width:680px;margin:0 auto;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.03)}
    /* 顶部抬头卡片 */
    .header{background:var(--brand);color:#fff;padding:28px 22px 18px;border-bottom-left-radius:0;border-bottom-right-radius:0}
    .title{font-size:20px;font-weight:600;line-height:1.35;margin:0 0 16px}
    .two-col{background:rgba(255,255,255,.12);border-radius:12px;display:flex;align-items:stretch;padding:12px 0}
    .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
    .label{font-size:14px;opacity:.95}
    .value{font-size:18px;font-weight:600}
    .divider{width:1px;background:rgba(255,255,255,.4);margin:0 6px}
    /* 信息明细 */
    .info{background:#fff;padding:18px 22px 8px}
    .row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
    .row:last-child{border-bottom:none}
    .key{color:var(--sub);font-size:15px}
    .val{color:var(--text);font-size:16px}
    /* 按钮区域 */
    .btn-wrap{padding:18px 22px;background:#fff}
    .primary-btn{appearance:none;-webkit-appearance:none;display:block;width:100%;height:48px;line-height:48px;text-align:center;background:var(--brand);color:#fff;border-radius:12px;border:none;font-size:16px;font-weight:600;box-shadow:0 8px 20px rgba(68,183,174,.28);cursor:pointer}
    .primary-btn:active{transform:translateY(1px)}
    .fallback{margin-top:10px;text-align:center;font-size:13px}
    .fallback a{color:var(--sub);text-decoration:none}
    /* 表格 */
    .table{margin:12px 0 0;background:#fff;padding:0 0 8px}
    .tr{display:flex;border-top:1px solid var(--line)}
    .tr:first-child{border-top:none}
    .th{background:#f6fbfb;color:var(--sub);font-weight:600}
    .td{padding:14px 12px;font-size:14px;border-right:1px solid var(--line);display:flex;align-items:center}
    .td:last-child{border-right:none}
    .w1{width:35%}
    .w2,.w3{width:20%}
    .w3{width:15%}
    .w4{width:30%; justify-content:flex-end; text-align:right; color:var(--sub)}
    .w2{justify-content:flex-end; text-align:right; color:var(--sub); font-weight:400}
    .spacer{height:80px;background:var(--bg)}
    /* 内嵌预览模式（可选） */
    .viewer{display:none}
    .viewer.active{display:block;height:80vh}
    .viewer iframe{width:100%;height:100%;border:none}
    /* 响应式 */
    @media (max-width:420px){
      .title{font-size:18px}
      .value{font-size:17px}
      .val{font-size:15px}
      .td{font-size:13px}
    }
  </style>
</head>
<body>
  <main class="page" id="app">
    <!-- 顶部抬头 -->
    <section class="header">
      <h1 class="title">人乳头瘤病毒(HPV)核酸检测（导流）</h1>
      <div class="two-col">
        <div class="col">
          <div class="label">就诊人</div>
          <div class="value" id="patientName">邹浩然</div>
        </div>
        <div class="divider"></div>
        <div class="col">
          <div class="label">性别</div>
          <div class="value" id="gender">男</div>
        </div>
      </div>
    </section>

    <!-- 信息明细 -->
    <section class="info">
      <div class="row"><div class="key">开方医生</div><div class="val" id="doctor">徐文阁</div></div>
      <div class="row"><div class="key">开方科室</div><div class="val" id="department">皮肤科门诊</div></div>
      <div class="row"><div class="key">报告时间</div><div class="val" id="reportTime">2025-09-11 17:00:43</div></div>
      <div class="row"><div class="key">报告单号</div><div class="val" id="reportNo">20250911-22-2044</div></div>
      <div class="row"><div class="key">住院号/索引号</div><div class="val" id="admissionNo">5730514</div></div>
    </section>

    <!-- 操作按钮 -->
    <section class="btn-wrap">
      <button class="primary-btn" id="openPdfBtn">查看PDF报告</button>
      <div class="fallback">
        打不开？ <a id="downloadLink" href="pdfbaogao.pdf" download>点此下载 PDF</a>
        <span> · </span>
        <a href="#" id="inlinePreview">改为页内预览</a>
      </div>
    </section>

    <!-- 表格 -->
    <section class="table">
      <div class="tr th">
        <div class="td w1">检查项目</div>
        <div class="td w2">结果</div>
        <div class="td w3" style="justify-content:center;text-align:center;">单位</div>
        <div class="td w4">参考值</div>
      </div>
      <div class="tr">
        <div class="td w1">低危型</div>
        <div class="td w2" id="lowRisk">阴性</div>
        <div class="td w3" id="unit1" style="justify-content:center;text-align:center;"></div>
        <div class="td w4">阴性(-)</div>
      </div>
      <div class="tr">
        <div class="td w1">高危型</div>
        <div class="td w2" id="highRisk">阴性</div>
        <div class="td w3" id="unit2" style="justify-content:center;text-align:center;"></div>
        <div class="td w4">阴性(-)</div>
      </div>
    </section>

    <div class="spacer"></div>

    <!-- 内嵌 PDF 预览容器（可选开关） -->
    <section class="viewer" id="viewer">
      <iframe id="pdfFrame" title="PDF"></iframe>
    </section>
  </main>

  <script>
    // === 配置：PDF 相对路径 ===
    const PDF_PATH = "pdfbaogao.pdf"; // 与 index.html 同目录即可

    // 打开新标签（或触发下载）
    document.getElementById("openPdfBtn").addEventListener("click", function(e){
      e.preventDefault();
      // 加上 #toolbar=1 增强浏览器原生 PDF 控件（兼容性取决于浏览器）
      const url = PDF_PATH + "#toolbar=1";
      window.open(url, "_blank");
    });

    // 兜底下载链接
    document.getElementById("downloadLink").setAttribute("href", PDF_PATH);

    // 切换为页内预览（当目标浏览器支持 <iframe> 内嵌 PDF 时体验更好）
    document.getElementById("inlinePreview").addEventListener("click", function(e){
      e.preventDefault();
      const viewer = document.getElementById("viewer");
      const frame = document.getElementById("pdfFrame");
      frame.src = PDF_PATH + "#toolbar=1";
      viewer.classList.add("active");
      // 自动滚动到预览区域
      viewer.scrollIntoView({behavior:"smooth", block:"start"});
    });

    // 可选：支持链接参数 ?embed=1 直接进入页内预览
    (function(){
      const params = new URLSearchParams(location.search);
      if(params.get("embed")==="1"){
        document.getElementById("inlinePreview").click();
      }
    })();
  </script>
</body>
</html>
